<template>
	<!-- 价格 -->
	<view :style="styleModule" class="flex align-baseline">
		<text v-if="props.useUnit" :style="[{ fontSize: unit + 'px' }]" class="m-r-2">¥</text>
		<text :class="{ 'special-font': props.fontSpecial }" :style="[{ fontSize: number + 'px' }]">
			{{ priceModule[0] }}
		</text>
		<text
			v-if="priceModule[1]"
			:class="{ 'special-font': props.fontSpecial }"
			:style="[{ fontSize: decimal + 'px' }]"
		>
			.{{ priceModule[1] }}
		</text>
		<text v-if="props.text" class="text-10 m-l-2" style="color:#EB5838">{{props.text}}</text>
	</view>
</template>

<script setup>
import {computed} from 'vue'

/**
 * 统一价格组件
 * @property {Number | String} price  			- 价格
 * @property {Boolean} useUnit 							- 是否使用价格单位
 * @property {Number} unit = 9 							- 单位 字体大小
 * @property {Number} number = 16  					- 整数部分 字体大小
 * @property {Number} decimal = 12  				- 小数部分 字体大小
 * @property {String} color									- 颜色
 * @property {Number} weight								- 字重，默认500
 * @property {Boolean} fontSpecial					- 是否使用特殊字体
 * @property {Boolean} useLine							- 是否使用中滑线
 * @property {Boolean} text									- 价格后的文字
 */
const props = defineProps({
	useUnit: {
		type: Boolean,
		default: true
	},
	price: {
		type: [String, Number],
		default() {
			return ''
		}
	},
	unit: {
		type: Number,
		default: 9
	},
	number: {
		type: Number,
		default: 16
	},
	decimal: {
		type: Number,
		default: 12
	},
	color: {
		type: String,
		default: '#9a703f'
	},
	weight: {
		type: Number,
		default: 500
	},
	fontSpecial: {
		type: Boolean,
		default: false
	},
	useLine: {
		type: Boolean,
		default: false
	},
	text: {
		type: String,
		default: ''
	}

})
const priceModule = computed(() => {
	const price = String(props.price)
	return price.split('.')
})
const styleModule = computed(() => {
	return {
		color: props.color,
		fontWeight: props.weight,
		textDecoration: props.useLine ? 'line-through' : 'none'
	}
})
</script>

<style lang="scss"></style>
